<template>
  <div class="share_content" :style="'height: ' + contentHeight + 'px;'">
    <div class="share_top">
      <div class="share_logo"><img src="../../assets/img/title.png" alt="logo"></div>
      <div class="share_tip">欢迎来到{{parent.store}}商城</div>
    </div>
    <div class="share_info">
      <div class="share-info-header">
          <div class="share-info-image">
              	<van-image
                    round
      					    width="100%"
      					    height="100%"
      					    :src="parent.avatar"
      					/>
          </div>
      </div>
      <div class="share_info_title">
        <p class="two">推荐人信息</p>
      </div>
      <ul>
        <li><p>微信昵称</p><p class="nickname">{{parent.nickname}}</p></li>
      </ul>
      <div class="share_xiey"><input  type="checkbox" :checked="checked" @click="onClickRegisterAgree"/>我已阅读并同意遵守<span @click="goregment">《用户注册协议》</span></div>
      <button class="share_btn" @click="bind">绑定关系并进入</button>
      <p class="share_p_tip">注：绑定关系一旦建立不可更改，请认真对待！</p>
      <p class="zhanwei"></p>
    </div>
    <div class="bankadd_content-wrapper" v-if="authshow" @click="closeModal">
        <div class="bankadd_content">
            <div class="bankadd_info box">
                <div class="input_div box">
                    <van-cell-group>
                      <van-field v-model="form.phone"
                        label="手机号"
                        type="tel"
                        placeholder="请输入手机号" 
                        label-class="cell_label"
                        />
                    </van-cell-group>
                    <van-cell-group>
                        <van-field
                          v-model="form.phonecode"
                          center
                          clearable
                          label="验证码"
                          type="tel"
                          placeholder="请输入验证码"
                          label-class="cell_label"
                        >
                          <template #button>
                            <van-button @click="sendCode" size="small" type="primary" style="background: #d64532;border-color: #d64532;" :disabled="disabled" >{{text}}</van-button>
                          </template>
                        </van-field>
                    </van-cell-group>
                    <van-cell-group>
                      <van-field v-model="form.password"
                        label="密码"
                        type="password"
                        placeholder="请输入密码"
                        label-class="cell_label"
                         />
                    </van-cell-group>

                    <van-cell-group>
                      <van-field v-model="form.conform_password" type="password" label="确认密码" placeholder="请再次输入密码" label-class="cell_label"/>
                    </van-cell-group>

                </div>

                <div class="btns_div box">
                    <button :class="readOnly == true ? 'div-onlyRead' : 'save_btn'" @click="onSave()" style="background-color: #d64532;">保存</button>
                </div>

            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { sendCode } from "@/api/user"
import { getOauthCode, bind, getParentInfo } from "@/api/user"
import { setToken } from '@/utils/auth'
import Vue from 'vue'
import { CellGroup,Field,Button } from 'vant'

Vue.use(CellGroup).use(Field).use(Button)
export default {
  name: 'share',
  data () {
      return {
          contentHeight: 0,
          form: {
            storeId: 0,
            code: 0,
            pid: 0,
            phone: '',
            phonecode: '',
            password: '',
            conform_password: '',
            handlerType: 'regist'
          },
          parent: [],
          checked:false,
          authshow:false,
          disabled: false,
          text: '获取验证码',
          readOnly:false,//true禁止点击 false可以点击
      }
  },
  mounted() {
    this.contentHeight = window.innerHeight
    this.redirectCodeUrl()
    this.getParentInfo()
  },
  methods: {
      redirectCodeUrl() {
          this.form.storeId = this.$route.query.storeId
          this.form.pid = this.$route.query.pid
          const code = this.$route.query.code
          if (code !== undefined) return
          const obj = {
              storeId: this.form.storeId,
              redirectType: "/share?storeId=" + this.form.storeId + '&pid=' + this.form.pid
          }
          getOauthCode(obj).then(response => {
              if (response.data.res) {
                  location.href = response.data.url
              } else {
                Toast.fail({message: '无效店铺', duration: 2000})
              }
          })
      },
      sendCode() {
            const toast = Toast.loading({
              duration: 0,
              message: '短信发送中...',
            });
            const obj = {
                storeId: this.form.storeId,
                phone: this.form.phone,
                handlerType: this.form.handlerType
            }
            sendCode(obj).then(res => {
                toast.clear()
                if (res.code === 20000) {
                    Toast.success({message: '发送成功', duration: 2000})
                    this.waitAgain()
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
      },
      waitAgain() {
          let code = 60
          const that = this
          const id = setInterval(function() {
              that.disabled = true
              that.text = `${--code}s后再试`
              if (code === 1) {
                  that.text = "获取验证码"
                  that.disabled = false
                  clearTimeout(id)
              }
          }, 1000)
      },
      bind() {
          
          if (this.checked == false) {
            Toast.fail({message: '请同意遵守用户注册协议', duration: 2000})
            return
          }
          this.authshow = true
          
      },
      onSave() {
            if (this.form.password !== this.form.conform_password) {
                Toast.fail({message: '两次密码不一致', duration: 2000})
                return
            }
            if (this.form.phone == '' || this.form.conform_password == '' || this.form.phonecode == '') {
                Toast.fail({message: '不能为空,请继续填写', duration: 2000})
                return
            }
            this.readOnly = true
            this.form.code = this.$route.query.code
            bind(this.form).then(res => {
              if (res.code !== 20000) {
                  if(res.info === '无效code') {
                    location.href = "/share?storeId=" + this.form.storeId + '&pid=' + this.form.pid
                  }else if(res.info === '已绑定关系'){
                    location.href = "/login?storeId=" + this.form.storeId
                  }else{
                    Toast.fail({message: res.info, duration: 2000})
                    //location.href = "/share?storeId=" + this.form.storeId + '&pid=' + this.form.pid
                  }
              } else {
                  setToken(res.data.token)
                  this.$router.push({path: '/person'})
              }
              this.authshow = false
              this.readOnly = false
          })
      },
      getParentInfo() {
          getParentInfo({pid: this.$route.query.pid}).then(res=>{
              this.parent = res.data
          })
      },
      onClickRegisterAgree(){
      		if(this.checked == true){
      			this.checked = false;
      		}else{
      			this.checked = true;
      		}
      },
      goregment(){
      	this.$router.push({path:'/agreement'});
      },
      closeModal(event) {
        // 如果点击的是弹窗本身而非背景，则不关闭
        if (event.target === event.currentTarget) {
          this.authshow = false;
        }
      }
  }
}
</script>

<style lang="stylus">
  .input_div .van-field__label{
    width:30%;
  }
</style>
<style lang="stylus" scoped>
// 1rem---50px     2x/100

  .share_content{
    width: 100%;
    height: 100%;
    background: url(../../assets/img/registerbj.jpg) no-repeat;
    background-position: 0;
    background-size: 100%;
    position: relative;
  }
  .share_top{
    width: 100%;
    overflow: hidden;
    padding-top: 32%;
    padding-bottom: 17%;
  }
  .share_logo img{
      display: block;
      overflow: hidden;
      margin: 0 auto;
      height: 0.9rem;
      width: 90%;
  }
  .share_tip{
    width: 80%;
    text-align: center;
    color: #AF370F;
    font-size: .65rem;
    padding: .2rem 0;
    letter-spacing: 3px;
    font-weight: 500;
    margin: auto;
  }

  .share_info{
    width: 80%;
    background: #fff;
    border-radius: .2rem;
    margin: 0 auto;
    padding: .1rem .3rem;
    box-shadow: 10px 10px 1px 2px rgba(252, 250, 250, 0.38);
  }

  .share-info-header{
    display: flex;
    justify-content: center;
    height: 1.5rem;
  }
  .share-info-image{
    width: 2rem;
    height: 2rem;
    position: relative;
    bottom: 1rem;
  }
  .share-info-image img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .share_info_title{
    overflow: hidden;
    text-align: center;
  }
  .share_info_title .one{
    font-size: .4rem;
    margin-top: 0.3rem
  }
  .share_info .zhanwei{
    height: 0.3rem;
  }
  .share_info_title .two{
    font-size: .56rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: .2rem;
    color: #6C6C6C;
  }
  .share_info li{
    width: 90%;
    overflow: hidden;
    line-height: .9rem;
    text-align: center;
    border-bottom: 2px solid #fff;
    font-size: .36rem;
    margin: auto;
    border: 1px solid #bf9797;
  }
  .share_info li p{
    width: 35%;
    height: .9rem;
    line-height: .9rem;
    float: left;
    background: #e8e9ec;

  }
  .share_info li .nickname{
    width: 65%;
    height: .9rem;
    line-height: .9rem;
    float: right;
    text-align: center;
    background: #e8f7ed;
  }
  .share_xiey{
    width: 100%;
    margin: .3rem 0;
    color: #177e69;
    position: relative;
    font-size: .28rem;
    text-align: center;
  }
  .share_btn{
    width: 55%;
    text-align: center;
    line-height: 1rem;
    height: 1rem;
    color: #fff;
    font-size: .36rem;
    background: #ff4a37;
    margin: .6rem auto .3rem auto;
    display: block;
    border-radius: 4px;
    border: 1px solid #eee;
  }
  .share_p_tip{
    font-size: .28rem;
    font-weight: 500;
    font-style: italic;
    color: #ff4a37;
    text-align: center;
  }
 .share_xiey input{
    display: block;
    width: .4rem;
    height: .4rem;
    cursor: pointer;
    background: rgba(240, 84, 77, 1);;
    display: inline-block;
    margin-right: .2rem;
}
.bankadd_content-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; // 设置足够高的层级
    background-color: rgba(0, 0, 0, 0.5); // 半透明背景
  }
  .bankadd_content{
    width: 88%;
    max-width: 600px; // 限制最大宽度
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2001; // 比包装器更高一层
  }
  .bankadd_info{
    width: 100%;
    overflow: hidden;
    padding: 1rem 0.4rem;
  }
  .btns_div{
    width: 100%;
    overflow: hidden;
  }
  
  .btns_div button{
    width: 100%;
    border: 1px solid red;
    background: red;
    line-height: .9rem;
    height: .9rem;
    font-size: .30rem;
    color: #fff;
    border-radius: .9rem;
    display: block;
    text-align: center;
    margin-top: .6rem;
  }
  
  .div-onlyRead{
    pointer-events: none;
  }
</style>
